<template>
    <div id="chinaMap">
        <div id="threejs"></div>
        <!-- 右侧按钮 -->
<!--                <div class="rightButton">-->
<!--                                <div v-for="(item, index) in rightButItem" :key="index" :value="item.value"-->
<!--                                     :class="item.selected ? 'selected common' : 'common'" @click="rightButClick(item)">-->
<!--                                    {{ item.name }}-->
<!--                                </div>-->
<!--                </div>-->
        <!-- 地图名称元素 -->
        <div id="provinceName" style="display: none"></div>
        <!-- 光柱上方数值元素 -->
        <div id="cylinderValue" style="display: none"></div>
        <!-- 地图标牌元素 -->
        <div id="mapTag" style="display: none">
            <div class="content">
                <div>旅客:</div>
                <div id="mapTag_value">1024万</div>
            </div>
            <div class="arrow"></div>
        </div>
        <!-- 弹框元素 -->
        <div id="popup" style="display: none">
            <div class="popup_line"></div>
            <div class="popup_Main">
                <div class="popupMain_top"></div>
                <div class="popup_content">
                    <div class="popup_head">
                        <div class="popup_title">
                            <div class="title_icon"></div>
                            <div id="popup_Name">四川省</div>
                        </div>
                        <div class="close" @click="popupClose"></div>
                    </div>
                    <div class="popup_item">

                    </div>
                </div>
                <div class="popupMain_footer"></div>
            </div>
        </div>
    </div>
</template>

<script>
import * as THREE from "three";
import TWEEN from "@tweenjs/tween.js";
import {CSS2DObject} from "three/addons/renderers/CSS2DRenderer.js";
import {
    scene,
    camera,
    controls,
    renderer,
    css3DRenderer,
    css2DRenderer,
    outlinePass,
    composer,
    finalComposer,
    mirror
} from "./baseConfig/index.js";
import {
    initMap,
    cityData,
    mapUf,
    waterObj,
    projection,
    provinceAdcodeMap,
    initProvinceMap
} from "./initChinaMap/index.js";
import {gridHelper, meshPoint} from "./backgroundMesh/index.js";
import {initMapFloat} from "./mapFloat/index.js";
import {circleUf, outerCircle, innerCircle, diffuseCircle, gradientPlane, planeUf} from "./backgroundCircle/index.js";
import {flyGroup, updateFlyLine, flyLineAnimation} from "./flyLine/index.js";
import {cylinderGroup, createCylindern, cylinderObj, apertureAnimation} from "./cylinder/index.js";
import {createMapTag, tagGroup} from "./mapTag/index.js";
import {particlesUpdate, createParticles, particles} from "./particles/index.js";
import {disposeObject} from "./disposeObject/index.js";
import {provinceData} from "@/views/provinceName/provinceData";


let mapModel, outLineModel, css2Dpopup, provinceMapModel
export default {
    data() {
        return {
            rightButItem: [
                {value: "tourism", name: "刷色图", selected: false},
                {value: "cylinder", name: "光柱", selected: false},
                {value: "flyLine", name: "飞线", selected: false},
                {value: "tag", name: "标牌", selected: false},
                {value: "particles", name: "粒子", selected: false},
                {value: "mirror", name: "倒影", selected: false},
                {value: "ripple", name: "波纹", selected: false},
            ],
            clock: new THREE.Clock(),
            divTag: null,
            currentLevel: 'province', // 'nation'或'province'
            currentProvince: null, // 当前选中的省份
            nationMapModel: null, // 保存全国地图模型
            provinceMapModel: null, // 省份地图模型
            animationInProgress: false, // 防止动画冲突
        };
    },
    mounted() {
        this.initThreeJS();
        this.rightButClick({value: "ripple", name: "波纹", selected: false})
        this.rightButClick( {value: "particles", name: "粒子", selected: false})
    },
    methods: {
        async initThreeJS() {
            document.getElementById("threejs").appendChild(renderer.domElement);
            document.getElementById("threejs").appendChild(css3DRenderer.domElement);
            document.getElementById("threejs").appendChild(css2DRenderer.domElement);

            createCylindern();
            createParticles();

            // 加载省份地图
            if (this.currentLevel === 'province') {
                const sichuanAdcode = 510000; // 四川省的adcode
                provinceMapModel = await initProvinceMap(sichuanAdcode);
                // createMapTag(cityData, waterObj); // 加载地标
                scene.add(provinceMapModel, gridHelper, meshPoint, outerCircle, innerCircle, diffuseCircle, gradientPlane, tagGroup);
                initMapFloat(camera, provinceMapModel, this);
            } else if (this.currentLevel === 'nation') {
                mapModel = await initMap();
                // createMapTag(cityData, waterObj);
                scene.add(mapModel, gridHelper, meshPoint, outerCircle, innerCircle, diffuseCircle, gradientPlane, tagGroup);
                initMapFloat(camera, mapModel, this);
            }

            this.initMapClickGlow();
            this.render();
            this.eventAnimation();
        },
        render() {
            requestAnimationFrame(this.render);
            camera.updateProjectionMatrix();
            controls.update();
            let deltaTime = this.clock.getDelta();
            mapUf.uTime.value += deltaTime;
            if (mapUf.uTime.value >= 5) {
                mapUf.uTime.value = 0.0;
            }

            if (this.rightButItem[1].selected) apertureAnimation();

            outerCircle.rotation.z -= 0.003;
            innerCircle.rotation.z += 0.003;

            if (this.rightButItem[2].selected) {
                flyLineAnimation();
            }

            if (this.rightButItem[6].selected) {
                circleUf.uTime.value += deltaTime;
                if (circleUf.uTime.value >= 6) {
                    circleUf.uTime.value = 0.0;
                }
            }

            if (this.rightButItem[4].selected) {
                particlesUpdate();
            }

            TWEEN.update();
            scene.traverse(this.darkenMaterial);
            composer.render();
            scene.traverse(this.restoreMaterial);
            finalComposer.render();
            css3DRenderer.render(scene, camera);
            css2DRenderer.render(scene, camera);
        },
        rightButClick(item) {
            item.selected = !item.selected;
            if (item.value === "tourism") {
                mapModel.traverse((obj) => {
                    if (obj.color) {
                        if (item.selected) {
                            obj.material[0].color = obj.color;
                            obj.material[0].metalness = 0.65;
                            obj.material[0].map = undefined;
                            obj.material[0].needsUpdate = true;
                        } else {
                            obj.material[0].color = new THREE.Color("#00FFFF");
                            obj.material[0].metalness = 0.0;
                            obj.material[0].map = obj.texture;
                            obj.material[0].needsUpdate = true;
                        }
                    }
                });
            } else if (item.value === "flyLine") {
                if (item.selected) {
                    scene.add(flyGroup);
                    updateFlyLine("湖北", cityData);
                } else {
                    scene.remove(flyGroup);
                }
            } else if (item.value === "cylinder") {
                if (item.selected) {
                    scene.add(cylinderGroup);
                    for (let key in cylinderObj) {
                        cylinderObj[key].visible = true;
                        cylinderObj[key].children[0].visible = true;
                    }
                } else {
                    for (let key in cylinderObj) {
                        cylinderObj[key].visible = false;
                        cylinderObj[key].children[0].visible = false;
                    }
                    for (const obj of cylinderGroup.children) {
                        if (obj.children) {
                            css2DRenderer.domElement.removeChild(obj.children[0].element);
                        }
                    }
                    scene.remove(cylinderGroup);
                }
            } else if (item.value === "ripple") {
                diffuseCircle.visible = item.selected;
                circleUf.uTime.value = 0.0;
            } else if (item.value === "mirror") {
                if (item.selected) {
                    scene.add(mirror);
                    planeUf.opacitys.radius = 0.05;
                    planeUf.opacitys.value = 0.4;
                } else {
                    scene.remove(mirror);
                    planeUf.opacitys.radius = 0.35;
                    planeUf.opacitys.value = 0.7;
                }
            } else if (item.value === "tag") {
                if (item.selected) {
                    scene.add(tagGroup);
                } else {
                    for (const obj of tagGroup.children) {
                        css2DRenderer.domElement.removeChild(obj.element);
                    }
                    scene.remove(tagGroup);
                }
            } else if (item.value === "particles") {
                if (item.selected) {
                    scene.add(particles);
                } else {
                    scene.remove(particles);
                }
            }
        },
        initMapClickGlow() {
            this.divTag = document.getElementById("popup");
            const widthScale = window.innerWidth / 1920;
            const heightScale = window.innerHeight / 941;
            this.divTag.style.top += (37 * heightScale).toFixed(2) + "px";
            this.divTag.style.left += (390 * widthScale).toFixed(2) + "px";
            css2Dpopup = new CSS2DObject(this.divTag);
            css2Dpopup.renderOrder = 99;
            const nameDiv = document.getElementById("popup_Name");

            let temp = true;

            // 左键点击定时器
            let leftClickTimer = null;
            // 右键点击定时器
            let rightClickTimer = null;
            // 左键跟踪连续点击的次数
            let leftClickCount = 0;
            // 右键跟踪连续点击的次数
            let rightClickCount = 0;
            // 延迟时间
            const delay = 300;

            addEventListener("click", (e) => {
                let intersects
                const px = e.offsetX;
                const py = e.offsetY;
                const x = (px / window.innerWidth) * 2 - 1;
                const y = -(py / window.innerHeight) * 2 + 1;
                const raycaster = new THREE.Raycaster();
                raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
                if (this.currentLevel === 'nation') {
                    intersects = raycaster.intersectObjects(mapModel.children);
                } else {
                    intersects = raycaster.intersectObjects(provinceMapModel.children);
                }

                intersects = intersects.filter((intersect) => {
                    return intersect.object.name !== "光圈" && intersect.object.name !== "光柱" && intersect.object.parent.name !== "省份边界线";
                });
                if (intersects.length > 0) {
                    if (outLineModel) {
                        disposeObject(outLineModel);
                        outLineModel.parent.remove(outLineModel);
                        outLineModel = null;
                    }
                    const rayModel = intersects[0].object.parent;
                    const mapLineData = rayModel.userData.mapData;

                    const shape = new THREE.Shape();
                    if (mapLineData.type === "MultiPolygon") {
                        mapLineData.coordinates.forEach((coordinate, index) => {
                            if (index === 0) {
                                coordinate.forEach((rows) => {
                                    rows.forEach((row) => {
                                        const [x, y] = projection(row);
                                        if (index === 0) {
                                            if (this.currentLevel === 'nation') {
                                                shape.moveTo(x, y);
                                            } else {
                                                shape.moveTo(x * 4 + 50, y * 4 - 70);
                                            }

                                        }
                                        if (this.currentLevel === 'nation') {
                                            shape.lineTo(x, y);
                                        } else {
                                            shape.lineTo(x * 4 + 50, y * 4 - 70);
                                        }

                                    });
                                });
                            }
                        });
                    }
                    if (mapLineData.type === "Polygon") {
                        mapLineData.coordinates.forEach((coordinate) => {
                            mapLineData.coordinates.forEach((rows, index) => {
                                if (index === 0) {
                                    rows.forEach((row) => {
                                        const [x, y] = projection(row);
                                        if (index === 0) {
                                            shape.moveTo(x, y);
                                        }
                                        shape.lineTo(x, y);
                                    });
                                }
                            });
                        });
                    }
                    const geometry = new THREE.ShapeGeometry(shape);
                    const material = new THREE.MeshBasicMaterial({
                        color: rayModel.children[1].material[0].color,
                        map: rayModel.children[1].material[0].map,
                        side: THREE.DoubleSide,
                    });
                    let mesh = new THREE.Mesh(geometry, material);
                    mesh.rotateX(-Math.PI);
                    mesh.name = "描边模型";

                    outLineModel = mesh;
                    rayModel.add(outLineModel);

                    outlinePass.selectedObjects = [outLineModel];
                    const center = rayModel.userData.center;
                    if (this.currentLevel === 'nation') {
                        css2Dpopup.position.set(center[0], center[1], 0);
                    } else {
                        css2Dpopup.position.set(center[0] * 4 + 50, center[1] * 4 - 70, 0);
                    }


                    outLineModel.add(css2Dpopup);
                    nameDiv.innerHTML = rayModel.parent.name;

                    new TWEEN.Tween({opacity: 0})
                        .to({opacity: 1.0}, 500)
                        .onUpdate((obj) => {
                            this.divTag.style.opacity = obj.opacity;
                        })
                        .start();
                    if (this.currentLevel === 'nation'
                    ) {
                        this.doubleClickHandle()

                    }
                }
            });


            //  添加右键点击事件
            addEventListener('contextmenu', (event) => {
                // this.rightClickHandle();
            });
        },
        popupClose() {
            if (outLineModel) {
                outlinePass.selectedObjects = [];
                new TWEEN.Tween({opacity: 1})
                    .to({opacity: 0}, 500)
                    .onUpdate((obj) => {
                        this.divTag.style.opacity = obj.opacity;
                    })
                    .onComplete(() => {
                        disposeObject(outLineModel);
                        outLineModel.parent.remove(outLineModel);
                        outLineModel = null;
                    })
                    .start();
            }
        },
        darkenMaterial(object) {
            const blackMaterialCache = new Map();

            object.traverse(obj => {
                if (obj.name.includes('发光')) {
                    return;
                }

                // 保存和清除场景背景
                if (obj instanceof THREE.Scene) {
                    if (!obj._originalBg) {
                        obj._originalBg = obj.background;
                        obj.background = null;
                    }
                }

                const material = obj.material;
                if (material) {
                    if (!obj._originalMaterial) {
                        obj._originalMaterial = material;

                        // 尝试从缓存获取黑色材质
                        let blackMaterial = blackMaterialCache.get(material);
                        if (!blackMaterial) {
                            const Proto = Object.getPrototypeOf(material).constructor;
                            blackMaterial = new Proto({color: new THREE.Color("#000")});
                            blackMaterialCache.set(material, blackMaterial);
                        }
                        obj.material = blackMaterial;
                    }
                }
            });
        },

        // 还原材质
        restoreMaterial(object) {
            object.traverse(obj => {
                if (obj.name.includes('发光')) {
                    return;
                }

                // 恢复场景背景
                if (obj instanceof THREE.Scene) {
                    if (obj._originalBg) {
                        obj.background = obj._originalBg;
                        delete obj._originalBg;
                    }
                }

                if (obj._originalMaterial) {
                    obj.material = obj._originalMaterial;
                    delete obj._originalMaterial;
                }
            });
        },
        eventAnimation() {
            new TWEEN.Tween(camera.clone().position)
                .to(new THREE.Vector3(-5, 250, 150), 1500)
                .easing(TWEEN.Easing.Sinusoidal.InOut)
                .onUpdate((e) => {
                    camera.position.copy(e);
                    controls.target.set(-5, 0, 10);
                    controls.update();
                })
                .start();
        },
        async doubleClickHandle() {
            if (this.currentLevel === 'nation') {
                this.currentLevel = 'province'
                mapModel.traverse((item) => {
                    item.visible = false;
                });
                const sichuanAdcode = 510000;
                provinceMapModel = await initProvinceMap(sichuanAdcode);
                // createMapTag(cityData, waterObj); // 加载地标
                scene.add(provinceMapModel, gridHelper, meshPoint, outerCircle, innerCircle, diffuseCircle, gradientPlane, tagGroup);
            }
        },
        async rightClickHandle() {
            if (this.currentLevel === 'province') {
                this.currentLevel = 'nation'
                provinceMapModel.traverse((item) => {
                    item.visible = false;
                });
                mapModel = await initMap();
                // createMapTag(cityData, waterObj); // 加载地标
                scene.add(mapModel, gridHelper, meshPoint, outerCircle, innerCircle, diffuseCircle, gradientPlane, tagGroup);
            }
        },
        oneClickHandle() {
        },
        // 钻取到省份
        async drillToProvince(provinceName) {


            // if (this.animationInProgress) return;
            // this.animationInProgress = true;
            const sichuanAdcode = 510000;
            mapModel = await initProvinceMap(sichuanAdcode);
            // // createMapTag(cityData, waterObj); // 加载地标
            scene.add(mapModel, gridHelper, meshPoint, outerCircle, innerCircle, diffuseCircle, gradientPlane, tagGroup);


            //
            // // 添加到场景
            // scene.add(this.provinceMapModel);
            //
            // // 更新状态
            // this.currentLevel = 'province';
            // this.currentProvince = provinceName;
            //
            // // 恢复UI元素（特定于省份）
            // this.showProvinceUI(provinceName);
            //
            // this.animationInProgress = false;
        },
        // 动画过渡到省份
        animateToProvince(province) {
            return new Promise(resolve => {
                const center = new THREE.Vector3(province.x, 0, -province.y);
                const startPos = camera.position.clone();
                const startTarget = controls.target.clone();

                new TWEEN.Tween({
                    posX: startPos.x,
                    posY: startPos.y,
                    posZ: startPos.z,
                    targetX: startTarget.x,
                    targetY: startTarget.y,
                    targetZ: startTarget.z
                })
                    .to({
                        posX: center.x,
                        posY: 150,
                        posZ: center.z + 100,
                        targetX: center.x,
                        targetY: 0,
                        targetZ: center.z
                    }, 1000)
                    .easing(TWEEN.Easing.Sinusoidal.InOut)
                    .onUpdate(obj => {
                        camera.position.set(obj.posX, obj.posY, obj.posZ);
                        controls.target.set(obj.targetX, obj.targetY, obj.targetZ);
                        controls.update();
                    })
                    .onComplete(resolve)
                    .start();
            });
        },
        // 动画返回全国
        animateToNation() {
            return new Promise(resolve => {
                const startPos = camera.position.clone();
                const startTarget = controls.target.clone();

                new TWEEN.Tween({
                    posX: startPos.x,
                    posY: startPos.y,
                    posZ: startPos.z,
                    targetX: startTarget.x,
                    targetY: startTarget.y,
                    targetZ: startTarget.z
                })
                    .to({
                        posX: 0,
                        posY: 900,
                        posZ: 700,
                        targetX: 0,
                        targetY: 0,
                        targetZ: 0
                    }, 1500)
                    .easing(TWEEN.Easing.Sinusoidal.InOut)
                    .onUpdate(obj => {
                        camera.position.set(obj.posX, obj.posY, obj.posZ);
                        controls.target.set(obj.targetX, obj.targetY, obj.targetZ);
                        controls.update();
                    })
                    .onComplete(resolve)
                    .start();
            });
        },
        // 隐藏UI元素
        hideUIElements() {
            // 隐藏所有标签、光柱等
            tagGroup.visible = false;
            cylinderGroup.visible = false;
            flyGroup.visible = false;
        },

        // 显示省份特定UI
        showProvinceUI(provinceName) {
            // 可以在这里添加省份特定的UI
            console.log(`显示 ${provinceName} 的详细信息`);
        },

        // 隐藏省份UI
        hideProvinceUI() {
            // 移除省份特定的UI
        },

        // 恢复全国UI
        showNationUI() {
            // 恢复全国视图的UI元素
            tagGroup.visible = true;
            if (this.rightButItem[1].selected) cylinderGroup.visible = true;
            if (this.rightButItem[2].selected) flyGroup.visible = true;
        },
    }
}

</script>

<style lang="less">
@media (max-width: 4400px) {
  html {
    font-size: 22px;
  }
}

@media (max-width: 3800px) {
  html {
    font-size: 20px;
  }
}

@media (max-width: 3200px) {
  html {
    font-size: 18px;
  }
}

@media (max-width: 2600px) {
  html {
    font-size: 16px;
  }
}

@media (max-width: 2000px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 1400px) {
  html {
    font-size: 12px;
  }
}

@media (max-width: 800px) {
  html {
    font-size: 10px;
  }
}

#chinaMap {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

#threejs {
  width: 100%;
  height: 100%;
}

.rightButton {
  position: absolute;
  right: 1vw;
  bottom: 40vh;
  width: 4vw;

  .common {
    width: 100%;
    height: 3vh;
    border: 1px solid #00ffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.2vh 0;
    color: #fafafa;
    opacity: 0.5;
    font-size: 0.8vw;
    cursor: pointer;
    transition: 1s;
  }

  .selected {
    opacity: 1 !important;
    transition: 1s;
  }
}

#provinceName {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  color: #8ee5ee;
  padding: 10px;
  width: 200px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 13px;
}

#popup {
  z-index: 999;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 41.66vw;
  height: 26.59vh;
  display: flex;

  .popup_line {
    margin-top: 4%;
    width: 24%;
    height: 26%;
    background: url("../../public/popup_line.png") no-repeat;
    background-size: 100% 100%;
  }

  .popup_Main {
    width: 35%;
    height: 80%;

    .popupMain_top {
      width: 100%;
      height: 10%;
      background: url("../../public/popupMain_head.png") no-repeat;
      background-size: 100% 100%;
    }

    .popupMain_footer {
      width: 100%;
      height: 10%;
      background: url("../../public/popupMain_footer.png") no-repeat;
      background-size: 100% 100%;
    }

    .popup_content {
      color: #fafafa;
      // background: rgba(47, 53, 121, 0.9);
      background-image: linear-gradient(to bottom, rgba(15, 36, 77, 1), rgba(8, 124, 190, 1));
      border-radius: 10px;
      width: 100%;
      height: 70%;
      padding: 5% 0%;

      .popup_head {
        width: 100%;
        height: 12%;
        margin-bottom: 2%;
        display: flex;
        align-items: center;

        .popup_title {
          color: #8ee5ee;
          font-size: 1vw;
          letter-spacing: 5px;
          width: 88%;
          height: 100%;
          display: flex;
          align-items: center;

          .title_icon {
            width: 0.33vw;
            height: 100%;
            background: #2586ff;
            margin-right: 10%;
          }
        }

        .close {
          cursor: pointer;
          pointer-events: auto;
          width: 1.5vw;
          height: 1.5vw;
          background: url("../../public/close.png") no-repeat;
          background-size: 100% 100%;
        }
      }

      .popup_item {
        display: flex;
        align-items: center;
        width: 85%;
        padding-left: 5%;
        height: 18%;
        // background: rgb(160, 196, 221);
        border-radius: 10px;
        margin: 2.5% 0%;
        margin-left: 10%;

        div {
          line-height: 100%;
          margin-right: 10%;
        }

        .item_value {
          font-size: 0.9vw;
          color: #00ffff;
          font-weight: 600;
          letter-spacing: 2px;
        }
      }
    }
  }
}

#cylinderValue {
  position: absolute;
  top: 0;
  left: 0;
  color: #bbffff;
}

#mapTag {
  z-index: 997;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .content {
    width: 100%;
    height: 100%;
    padding: 2px 3px;
    background: #0e2346;
    border: 1px solid #6298a9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fafafa;

    #mapTag_value {
      color: #ffd700;
    }
  }

  .content::before {
    content: "";
    width: 100%;
    // height: calc(100% - 1vw);
    position: absolute;
    background: linear-gradient(to top, #26aad1, #26aad1) left top no-repeat,
      //上左
    linear-gradient(to right, #26aad1, #26aad1) left top no-repeat,
    linear-gradient(to top, #26aad1, #26aad1) right bottom no-repeat,
      //下右
    linear-gradient(to left, #26aad1, #26aad1) right bottom no-repeat; //右下
    background-size: 2px 10px, 16px 2px, 2px 10px, 16px 2px;
    pointer-events: none;
  }

  .arrow {
    background: url("../../public/arrow.png") no-repeat;
    background-size: 100% 100%;
    width: 1vw;
    height: 1vw;
  }
}

.drill-controls {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
  background: rgba(0, 30, 60, 0.8);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #00a0e9;
  box-shadow: 0 0 15px rgba(0, 160, 233, 0.5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.back-button {
  padding: 10px 15px;
  background: linear-gradient(to bottom, #0081b9, #005a8a);
  color: white;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.back-button:hover {
  background: linear-gradient(to bottom, #00a0e9, #0073a8);
  box-shadow: 0 0 10px rgba(0, 160, 233, 0.7);
}

.back-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>');
}

.current-view {
  padding: 8px 12px;
  background: rgba(0, 60, 120, 0.6);
  border-radius: 4px;
  font-size: 16px;
  color: #fff;
}
</style>
